<script setup lang="ts">
import ImgCutter from 'vue-img-cutter'
import {imageUploadApi} from "@/api/image_api";
import {Message} from "@arco-design/web-vue";

interface Props {
  modelValue: string
  rate?: string
}

const props = defineProps<Props>()
const {rate = "1:1"} = props
const emits = defineEmits(["update:modelValue", "change"])

async function cutDown(e: any) {
  const file = e.file as File
  const res1 = await imageUploadApi(file)
  if (res1.code) {
    Message.error(res1.msg)
    return
  }
  emits("update:modelValue", res1.data)
  emits("change", res1.data)
}


</script>

<template>
  <div>
    <ImgCutter :rate="rate" @cutDown="cutDown">
      <template #open>
        <a-avatar :image-url="props.modelValue"></a-avatar>
      </template>
    </ImgCutter>
  </div>
</template>

<style scoped lang="less">

</style>